<template>
	<view class="container">
		<view class="tui-order-header">
			<view class="tui-header-content">
				<view>
					<view class="tui-status-text">
						<tui-icon name="clock" :size="20" color='#999999' style="padding-right: 10upx;"></tui-icon>
						{{orderInfo.orderStatus == 201 ? '待发货' : orderInfo.orderStatusText}}
					</view>
					<view class="tui-reason" v-show="status == 2">
						<text class="tui-reason-text">您的宝贝马上就会去找您。</text>
					</view>
					<view class="only_time" v-show="status == 1">
						<text>支付剩余时间</text>
						<tui-countdown class="time" :time="timeList[0]" borderColor="#F2F2F2" backgroundColor="#F2F2F2" colonColor="#F2F2F2"></tui-countdown>
					</view>
				</view>
			</view>
		</view>

		<tui-list-cell unlined :hover="false">
			<view class="tui-flex-box">
				<image :src="webURL+'img_order_address3x.png'" class="tui-icon-img"></image>
				<view class="tui-addr">
					<view class="tui-addr-userinfo">{{orderInfo.buyUserInfo}}<text class="tui-addr-tel">{{orderInfo.mobile}}</text></view>
					<view class="tui-addr-text">{{orderInfo.address}}</view>
				</view>
			</view>
		</tui-list-cell>

		<view class="tui-order-item">
			
			<tui-list-cell>
				<view class="tui-goods-item" v-for="(item,index) in orderGoods" :key="index">
					<image class="tui-goods-img" :src="item.picUrl"></image>
					<view class="tui-goods-center">
						<view class="tui-goods-name">{{item.goodsName}}</view>
						<view class="tui-goods-attr">产品参数:{{item.specifications[0]}} 规格:{{item.specifications[1]}}</view>
						<view class="tui-price-right">
							<view>x{{item.number}}</view>
							<view>￥{{item.price}}</view>
						</view>
					</view>
				</view>
			</tui-list-cell>
			
			<view class="tui-goods-info">
				<view class="tui-price-flex">
					<view class="tui-size-12">实付：</view>
					<view class="tui-price-large">¥{{orderInfo.actualPrice}}</view>
					<view class="tui-size-12">(免运费)</view>
				</view>
			</view>
			
		</view>

		<view class="tui-order-info">
			<view class="tui-order-content">
				<view class="tui-order-flex">
					<view class="tui-item-title">订单编号:</view>
					<view class="tui-item-content">{{orderInfo.orderSn}}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">支付方式:</view>
					<view class="tui-item-content">微信支付</view>
				</view>
				<view class="tui-order-flex" v-show="status == 3">
					<view class="tui-item-title">物流公司:</view>
					<view class="tui-item-content">{{orderInfo.expCode}}</view>
				</view>
				<view class="tui-order-flex" v-show="status == 3">
					<view class="tui-item-title">快递单号:</view>
					<view class="tui-item-content">{{orderInfo.expNo}}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">下单时间:</view>
					<view class="tui-item-content">{{orderInfo.addTime}}</view>
				</view>
			</view>
		</view>
		
		<view class="tui-safe-area"></view>
		
		<view class="tui-tabbar tui-order-btn" v-if="orderState != 0">
			<view class="tui-btn-mr" v-show="status == 1">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="cancelOrder()">取消订单</tui-button>
			</view>
			<view class="tui-btn-mr" v-show="status == 1">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="payment(orderInfo.goodsPrice,orderInfo.id)">立即付款</tui-button>
			</view>
			<view class="tui-btn-mr" v-show="status == 0">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="deleteOrder">删除订单</tui-button>
			</view>
			<view class="tui-btn-mr" v-show="status == 3">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="checkExpress">查看物流</tui-button>
			</view>
			<view class="tui-btn-mr" v-show="status == 3">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="checkOrder">确认收货</tui-button>
			</view>
			<view class="tui-btn-mr" v-show="status == 2">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="btnPay">再次购买</tui-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				timeList: [1800],
				webURL: "https://www.thorui.cn/wx/static/images/mall/order/",
				status: 1,
				getStatusText: "",
				userId: "",
				orderId: "",
				goodsId:"",
				orderDetail: "",
				orderInfo: {},
				orderGoods:[],
				orderState:"",
			}
		},
		onLoad(option) {
			if(option.userId){
				this.userId = option.userId
			}else{
				let userInfo = uni.getStorageSync("userInfo")
				this.userId = userInfo.id
			}
			
			this.orderId = option.orderId
			this.orderState = option.orderState
			
			if (option.id == 103) {
				this.status = 0;
				// this.getStatusText = "订单不存在";
			} else if (option.id == 101) {
				this.status = 1;
				// this.getStatusText = "待付款";
			} else if (option.id == 201) {
				this.status = 2;
				// this.getStatusText = "付款成功";
			} else if (option.id == 301) {
				this.status = 3;
				// this.getStatusText = "待收货";
			} else if (option.id == 4) {
				this.status = 4;
				// this.getStatusText = "订单已完成";
			} else if (option.id == 5) {
				this.status = 5;
				// this.getStatusText = "订单已关闭";
			} else if (option.id == 103) {
				this.status = 6;
				// this.getStatusText = "订单已取消";
			}
			this.loadData();
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			this.loadData();
			uni.stopPullDownRefresh();
		},
		methods: {
			//详情数据
			loadData() {
				let id = uni.getStorageSync("orderId")
				console.log(id)
				this.tui.request('/app/order/detail', 'GET', {
							userId: this.userId,
							orderId: id,
						},
						false, false, false, )
					.then(res => {
						if (res.errno == 0) {
							this.orderInfo = res.data.orderInfo
							this.orderGoods = res.data.orderGoods
							this.goodsId = this.orderGoods[0].goodsId
						} else {
							console.log(res)
							this.tui.toast(res.errmsg)
						}
					}).catch(err => {
						console.log(err)
					})
			},
			
			//再次购买
			btnPay() {
				uni.redirectTo({
					url: "/pages/product/product?id="+this.goodsId
				})
			},
			
			//付款
			payment(money,orderId){
				uni.redirectTo({
					url: `/pages/money/pay?orderId=${orderId}&money=${money}`
				})
			},
			
			//查看物流
			checkExpress(){
				this.tui.request('/app/order/checkExpress?expNo='+ this.expNo + '&expCode=' + this.expCode, 'POST', {
							expCode: this.userId,
							expNo: this.orderId,
						},
						false, false, false, )
					.then(res => {
							
						
					}).catch(err => {
						console.log(err)
					})
			},
			
			//删除订单
			deleteOrder() {
				this.tui.request('/app/order/delete?userId=' + this.userId, 'POST', {
							userId: this.userId,
							orderId: this.orderId,
						},
						false, false, false, )
					.then(res => {
			
						uni.showLoading({
							title: '删除成功'
						})
						uni.redirectTo({
							url: "/pages/order/order"
						})
					}).catch(err => {
						console.log(err)
					})
			
			},
			
			//确认收货
			checkOrder() {
				this.tui.request('/app/order/confirm?userId=' + this.userId, 'POST', {
							orderId: this.orderId,
						},
						false, false, false, )
					.then(res => {
						if (res.errno == 0) {
							uni.showLoading({
								title: '确认收货成功'
							})
							uni.redirectTo({
								url: "/pages/order/order"
							})
						}
			
					}).catch(err => {
						console.log(err)
					})
			},
			
			//取消订单
			cancelOrder() {
				this.tui.request('/app/order/cancel?userId=' + this.userId, 'POST', {
							orderId: this.orderId,
						},
						false, false, false, )
					.then(res => {
						if (res.errno == 0) {
							uni.showLoading({
								title: '取消成功'
							})
							uni.redirectTo({
								url: "/pages/order/order"
							})
						}
			
					}).catch(err => {
						console.log(err)
					})
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 118rpx;
		height: 100%;
		background: #FAFAFA;
	}

	/* 定时器 */
	.only_time {
		display: flex;
		align-items: center;
		padding-top: 10px;
		font-size: 28upx;
		color: #909399;
	}

	.time {
		color: #666666;
		padding-left: 10px;
		display: flex;
		align-items: center;

	}

	.tui-order-header {
		width: 100%;
		height: 160rpx;
		position: relative;
		background-color: #FFFFFF;
		margin-bottom: 10px;
	}

	.tui-header-content {
		width: 100%;
		height: 160rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.tui-status-text {
		font-size: 34rpx;
		line-height: 34rpx;
		color: #D14798;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-reason {
		font-size: 24rpx;
		line-height: 24rpx;
		color: rgba(254, 254, 254, 0.75);
		padding-top: 15rpx;
		display: flex;
		align-items: center;
	}

	.tui-reason-text {
		color: #999999;
		padding-right: 12rpx;
	}

	.tui-status-img {
		width: 80rpx;
		height: 80rpx;
		display: block;
	}

	.tui-flex-box {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.tui-icon-img {
		width: 44rpx;
		height: 44rpx;
		flex-shrink: 0;
	}

	.tui-logistics {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 24rpx 0 20rpx;
		box-sizing: border-box;
	}

	.tui-logistics-text {
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-logistics-time {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 16rpx;
		color: #666
	}

	.tui-addr {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.tui-addr-userinfo {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: bold;
	}

	.tui-addr-text {
		font-size: 24rpx;
		line-height: 32rpx;
		padding-top: 16rpx;
	}

	.tui-addr-tel {
		padding-left: 40rpx;
	}

	.tui-order-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}


	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #999999;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #999999;
		line-height: 30rpx;
		padding-top: 20rpx;
		font-weight: 700;
	}

	.tui-price-right view:nth-child(2) {
		color: #D14798;
		font-size: 38upx;
	}

	.tui-goods-info {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.tui-price-flex {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
	}

	.tui-size-12 {
		font-size: 12px;
		color: #666666;
	}

	.tui-price-large {
		font-size: 40upx;
		color: #D14798;
		line-height: 40upx;
		font-weight: 700;
	}

	.tui-order-info {
		margin-top: 20rpx;
	}

	.tui-order-content {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		background: #fff;
		font-size: 24rpx;
		line-height: 30rpx;
	}

	.tui-order-flex {
		display: flex;
		color: #999999;
		font-size: 28upx;
		line-height: 40upx;
		padding-top: 18rpx;
	}

	.tui-order-flex:first-child {
		padding-top: 0
	}

	.tui-item-title {
		width: 132rpx;
		flex-shrink: 0;
	}

	.tui-item-content {
		color: #999999;
	}

	.tui-safe-area {
		height: 1rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 996;
	}

	.tui-btn-mr {
		margin-right: 30rpx;


	}
</style>
